<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单显示与隐藏</title>
    <script>
        function fn(a,b,c){
            let currentChild = document.getElementById(a);
            let bChild = document.getElementById(b);
            let cChild = document.getElementById(c);
            // 事件发生时,当前节点有两种情况
            // 1.当前节点处于隐藏状态
            if(currentChild.style.display == "none"){
                // 此时需要将当前节点显示出来
                currentChild.style.display = "block";
                // 将其他节点全部隐藏
                bChild.style.display = "none";
                cChild.style.display = "none";
                return;
            }
            // 2.当前节点处于显示状态
            // 此时其他节点一定处于隐藏状态
            currentChild.style.display = "none";
        }
    </script>
</head>
<body>
<!--
    三个列表点击某一个时会触发显示或者隐藏的效果
    原本如果是显示,则隐藏起来
    原本如果是隐藏,则显示出来
    且三个列表,最多显示一个出来
    其他两个必须处于隐藏状态
-->
<h2 onclick="fn('u1','u2','u3')">您最喜欢的音乐</h2>
<ul id="u1" style="display: none;">
    <li>小苹果</li>
    <li>月亮之上</li>
    <li>荷塘月色</li>
    <li>自由飞翔</li>
</ul>
<h2 onclick="fn('u2','u1','u3')">您最喜欢的综艺节目</h2>
<ul id="u2" style="display: block;">
    <li>奔跑吧</li>
    <li>极限挑战</li>
    <li>中餐厅</li>
    <li>王牌对王牌</li>
</ul>
<h2 onclick="fn('u3','u1','u2')">您最喜欢的电视剧</h2>
<ul id="u3" style="display: none;">
    <li>亮剑</li>
    <li>西游记</li>
    <li>三国演义</li>
    <li>情深深雨蒙蒙</li>
    <li>还珠格格</li>
</ul>
</body>
</html>